<template>
    <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="页面标题" prop="title">
            <el-input v-model="form.title"></el-input>
        </el-form-item>
        <!--		<el-form-item label="页面路径" prop="path">-->
        <!--			<el-input v-model="form.pathTemp" ></el-input>-->
        <!--		</el-form-item>-->
        <el-form-item label="页面简介" prop="des">
            <el-input v-model="form.des"></el-input>
        </el-form-item>
        <el-form-item label="品牌" prop="brand" v-if="selectMod.name ==='model'">
            <el-select v-model="selectBrand" value-key="name" placeholder="选择品牌" clearable>
                <el-option v-for="(item, index) in brandList" :key="item.name" :label="item.name" :value="item"/>
            </el-select>
        </el-form-item>
        <el-form-item label="模板" prop="pageContent">
            <el-select v-model="selectMod" value-key="name" placeholder="选择模板" clearable>
                <el-option v-for="(item, index) in modList" :key="item.name" :label="item.name" :value="item"/>
            </el-select>
        </el-form-item>
        <el-form-item label="缩略图" prop="thumb">
            <el-upload class="avatar-uploader" :action=url :show-file-list="false" :on-success="handleAvatarSuccess">
                <img v-if="thumb" :src="thumb" class="avatar"/>
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus/>
                </el-icon>
            </el-upload>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="saveEdit(formRef)">保 存</el-button>
        </el-form-item>
    </el-form>
</template>

<script lang="ts" setup>
    import {ElMessage, FormInstance, FormRules, UploadProps} from 'element-plus';
    import {ref} from 'vue';
    // 引入vue-json-editor模块
    import base from '../utils/base';
    import mod from '../api/mod'
    import page from '../api/page'

    const url = `${base.rq}/file/upload?token=${localStorage.getItem("token")}`


    const modList = ref([
        {
            name: "article",
            pre: "article/"
        },
        {
            name: "model",
            pre: "model/"
        },
        {
            name: "maininfo",
            pre: "maininfo/"
        },
        {
            name: "home",
            pre: "home"
        },
        {
            name: "milestone",
            pre: "milestone"
        },
    ]);

    const brandList = ref([
        {
            name: "EXEED",
            pre:"exeed/"
        },
        {
            name: "EXLANTiX",
            pre:"exlantix/"
        }
    ]);
    // 获取模板列表
    const getData = () => {
        mod.selectAll({}, (res) => {
            if (res.code === 200) {
                modList.value = res.data;
            }
        });
    };

    const props = defineProps({
        data: {
            type: Object,
            required: true
        },
        current: {
            type: String,
            required: false
        },
        edit: {
            type: Boolean,
            required: false
        },
        update: {
            type: Function,
            required: true
        }
    });
    const selectMod = ref({
        name: "",
        pre: ""
    })

    const selectBrand = ref({
        name:"",
        pre: ""
    })

    if (props.current) {
        for (let index in modList.value) {
            if (modList.value[index].name === props.current) {
                selectMod.value = modList.value[index];
            }
        }
    }

    const defaultData = {
        id: '',
        title: '',
        type: "",
        pathTemp: '',
        des: "",
        isArticle: 1,
        thumbnailUrl: "",
        isPublish: 0,
        path: "",
        brand:""
    };

    const form = ref({...(props.edit ? props.data : defaultData)});
    const thumb = props.edit ? ref(props.data.thumbnailUrl) : ref('');

    const rules: FormRules = {
        name: [{required: true, message: '模板名称', trigger: 'blur'}],
        content: [{required: true, message: '模板内容', trigger: 'blur'}]

    };
    const formRef = ref<FormInstance>();
    const saveEdit = (formEl: FormInstance | undefined) => {
        commit();
        console.log(form.value);
    };

    // json 保存
    const commit = () => {
        // form.value.pageContent  = selectMod.value.modContent;
        form.value.path = selectMod.value.pre + selectBrand.value.pre;
        form.value.type = selectMod.value.name;
        form.value.brand = selectBrand.value.name;
        page.save(
            form.value,
            (res) => {
                if (res.code === 200) {
                    console.log(res)
                    ElMessage.success('保存成功！');
                    props.update();
                } else {
                    ElMessage.warning(res.message);
                    props.update();
                }
            });
    };


    const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
        // form.value.thumb = URL.createObjectURL(uploadFile.raw!);
        form.value.thumbnailUrl = response.data.realName;
        thumb.value = response.data.tmpUrl;
    };
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed var(--el-border-color);
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: var(--el-transition-duration-fast);
    }

    .avatar-uploader .el-upload:hover {
        border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }

    .editor-container {
        width: 1000px;

    }

    .editor {
        padding: 0px;
    }

    .editor :deep(.jsoneditor-poweredBy) {
        display: none;

    }

    .avatar {
        width: 300px;
    }
</style>
